@white: #fff;
@gray-100: #f8f9fa;
@gray-200: #e9ecef;
@gray-300: #dee2e6;
@gray-400: #ced4da;
@gray-500: #adb5bd;
@gray-600: #6c757d;
@gray-700: #495057;
@gray-800: #343a40;
@gray-900: #212529;
@black: #000;

@blue: #0d6efd;
@indigo: #6610f2;
@purple: #6f42c1;
@pink: #d63384;
@red: #dc3545;
@orange: #fd7e14;
@yellow: #fadb14;
@green: #52c41a;
@teal: #20c997;
@cyan: #17a2b8;

@primary: @blue;
@secondary: @gray-600;
@success: @green;
@info: @cyan;
@warning: @yellow;
@danger: @red;
@light: @gray-100;
@dark: @gray-800;

#theme-colors() {
  primary: @primary;
  secondary: @secondary;
  success: @success;
  info: @info;
  warning: @warning;
  danger: @danger;
  light: @light;
  dark: @dark;
}

@font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
  Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
@font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
  monospace;
@font-family-base: @font-family-sans-serif;

// 字体大小
@font-size-base: 1rem; // Assumes the browser default, typically `16px`
@font-size-lg: @font-size-base * 1.25;
@font-size-sm: @font-size-base * 0.875;
@font-size-root: null;

// 字重
@font-weight-lighter: lighter;
@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 700;
@font-weight-bolder: bolder;
@font-weight-base: @font-weight-normal;

// 行高
@line-height-base: 1.5;
@line-height-lg: 2;
@line-height-sm: 1.25;

// 标题大小
@h1-font-size: @font-size-base * 2.5;
@h2-font-size: @font-size-base * 2;
@h3-font-size: @font-size-base * 1.75;
@h4-font-size: @font-size-base * 1.5;
@h5-font-size: @font-size-base * 1.25;
@h6-font-size: @font-size-base;

// 链接
@link-color: @primary;
@link-decoration: none;
@link-hover-color: darken(@link-color, 15%);
@link-hover-decoration: underline;

// body
@body-bg: @white;
@body-color: @gray-900;
@body-text-align: null;

// Spacing
@spacer: 1rem;

@headings-margin-bottom: @spacer / 2;
@headings-font-family: null;
@headings-font-style: null;
@headings-font-weight: 500;
@headings-line-height: 1.2;
@headings-color: null;

// Paragraphs

@paragraph-margin-bottom: 1rem;

// 字体其他部分 heading list hr 等等
@headings-margin-bottom: @spacer / 2;
@headings-font-family: null;
@headings-font-style: null;
@headings-font-weight: 500;
@headings-line-height: 1.2;
@headings-color: null;

@display1-size: 6rem;
@display2-size: 5.5rem;
@display3-size: 4.5rem;
@display4-size: 3.5rem;

@display1-weight: 300;
@display2-weight: 300;
@display3-weight: 300;
@display4-weight: 300;
@display-line-height: @headings-line-height;

@lead-font-size: @font-size-base * 1.25;
@lead-font-weight: 300;

@small-font-size: 0.875em;

@sub-sup-font-size: 0.75em;

@text-muted: @gray-600;

@initialism-font-size: @small-font-size;

@blockquote-small-color: @gray-600;
@blockquote-small-font-size: @small-font-size;
@blockquote-font-size: @font-size-base * 1.25;

@hr-color: inherit;
@hr-height: 1px;
@hr-opacity: 0.25;

@legend-margin-bottom: 0.5rem;
@legend-font-size: 1.5rem;
@legend-font-weight: null;

@mark-padding: 0.2em;

@dt-font-weight: @font-weight-bold;

@nested-kbd-font-weight: @font-weight-bold;

@list-inline-padding: 0.5rem;

@mark-bg: #fcf8e3;

@hr-margin-y: @spacer;

// Code

@code-font-size: @small-font-size;
@code-color: @pink;
@pre-color: null;

// options 可配置选项
@enable-pointer-cursor-for-buttons: true;

// 边框 和 border radius

@border-width: 1px;
@border-color: @gray-300;

@border-radius: 0.25rem;
@border-radius-lg: 0.3rem;
@border-radius-sm: 0.2rem;

// 不同类型的 box shadow
@box-shadow-sm: 0 0.125rem 0.25rem rgba(@black, 0.075);
@box-shadow: 0 0.5rem 1rem rgba(@black, 0.15);
@box-shadow-lg: 0 1rem 3rem rgba(@black, 0.175);
@box-shadow-inset: inset 0 1px 2px rgba(@black, 0.075);

// 按钮
// 按钮基本属性
@btn-font-weight: 400;
@btn-padding-y: 0.375rem;
@btn-padding-x: 0.75rem;
@btn-font-family: @font-family-base;
@btn-font-size: @font-size-base;
@btn-line-height: @line-height-base;

//不同大小按钮的 padding 和 font size
@btn-padding-y-sm: 0.25rem;
@btn-padding-x-sm: 0.5rem;
@btn-font-size-sm: @font-size-sm;

@btn-padding-y-lg: 0.5rem;
@btn-padding-x-lg: 1rem;
@btn-font-size-lg: @font-size-lg;

// 按钮边框
@btn-border-width: @border-width;

// 按钮其他
@btn-box-shadow: inset 0 1px 0 rgba(@white, 0.15), 0 1px 1px rgba(@black, 0.075);
@btn-disabled-opacity: 0.65;

// 链接按钮
@btn-link-color: @link-color;
@btn-link-hover-color: @link-hover-color;
@btn-link-disabled-color: @gray-600;

// 按钮 radius
@btn-border-radius: @border-radius;
@btn-border-radius-lg: @border-radius-lg;
@btn-border-radius-sm: @border-radius-sm;

@btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

// menu
@menu-border-width: @border-width;
@menu-border-color: @border-color;
@menu-box-shadow: inset 0 1px 0 rgba(@white, 0.15), 0 1px 1px rgba(@black, 0.075);
@menu-transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;

// menu-item
@menu-item-padding-y: 0.5rem;
@menu-item-padding-x: 1rem;
@menu-item-active-color: @primary;
@menu-item-active-border-width: 2px;
@menu-item-disabled-color: @gray-600;

//sub-menu
//submenu
@submenu-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

//input
@input-padding-y: @btn-padding-y;
@input-padding-x: @btn-padding-x;
@input-font-family: @btn-font-family;
@input-font-size: @btn-font-size;
@input-font-weight: @font-weight-base;
@input-line-height: @btn-line-height;

@input-padding-y-sm: @btn-padding-y-sm;
@input-padding-x-sm: @btn-padding-x-sm;
@input-font-size-sm: @btn-font-size-sm;

@input-padding-y-lg: @btn-padding-y-lg;
@input-padding-x-lg: @btn-padding-x-lg;
@input-font-size-lg: @btn-font-size-lg;

@input-bg: @white;
@input-disabled-bg: @gray-200;
@input-disabled-border-color: null;

@input-color: @gray-700;
@input-border-color: @gray-400;
@input-border-width: @border-width;
@input-box-shadow: @box-shadow @box-shadow-inset;

@input-border-radius: @border-radius;
@input-border-radius-lg: @border-radius-lg;
@input-border-radius-sm: @border-radius-sm;

@input-focus-bg: @input-bg;
@input-focus-border-color: lighten(@primary, 15%);
@input-focus-width: 0.1rem;
@input-focus-color: @input-color;
@input-focus-shadow-color: rgba(@primary, 0.25);
@input-focus-box-shadow: 0 0 0 @input-focus-width @input-focus-shadow-color;

@input-placeholder-color: @gray-600;
@input-plaintext-color: @body-color;

@input-height-border: @input-border-width * 2;

@input-transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

@input-group-addon-color: @input-color;
@input-group-addon-bg: @gray-200;
@input-group-addon-border-color: @input-border-color;

// Progress bars

@progress-font-size: @font-size-base * 0.75;
@progress-bg: @gray-200;
@progress-border-radius: @border-radius;
@progress-bar-color: @white;
@progress-bar-transition: width 0.6s ease;
